<template>
  <div id="batching" v-show="isShow" :style="'width:calc( 100% - '+ leftDomWidth +'px );left:'+leftDomWidth+'px;'" class="batching">
    <div style="display: flex;align-items: center;">
      <img src="@/assets/icons/checked_icon.png" alt="" />
      <span>{{ showLabel }}</span>
    </div>
    <div>
      <!-- <el-button type="primary" icon="Download" plain>批量下载</el-button> -->
      <el-button type="danger" icon="Delete" plain @click="handleDelete">批量删除</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNewConfig } from "@/store/modules/newConfig"

const emit:any = defineEmits(["handleDelete"])
const showLabel:any = ref("已选0项")
const isShow: any = ref(false)
let isTableBig = false
const leftDomWidth = ref(240)
const props:any = defineProps(["ids"])
const handleDelete = () => {
  emit("handleDelete")
}
const init = (val:any) => {
  if (val && val.length >= 2) {
    isShow.value = true
    showLabel.value = "已选 "+val.length+" 项"
  } else {
    isShow.value = false
  }
}
// 暗模式开始关闭 全局变量 监听
const newConfig = useNewConfig()
watch(() => newConfig.leftNavOpen, (val: any) => {
  leftDomWidth.value = isTableBig ? 0 : (val ? 240 : 54)
},{immediate: true} )
watch(() => props.ids, (val:any) => {
  init(val)
},{immediate:true,deep:true})
</script>

<style lang="scss" scoped>
.batching{
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0px 20px;
  animation: btot 0.5s;
  z-index: 1004;
  @keyframes btot {
    from {
      bottom: -70px;
    }
    to{
      bottom: 0px;
    }
  }
  img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
</style>
